<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>网易云音乐</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<br>
<img th:src="${song.albumImg}" alt="B.Match" class="song-albumImg">
<h1 th:text="${song.name}" class="song-name"></h1>


<a id="to-play" href="#" th:data-id="${song.id}" class="play-btn">播放</a>
<audio id="player" style="display:none;" src="" controls="controls" ></audio>
<h3>
    <label >歌手：</label>
    <span th:text="${song.singer}" class="song-singer"></span>
</h3>

<h3>
    <label>所属专辑:</label><span th:text="${song.albumName}" class="song-albumName"></span>
</h3>
<h3>
    <label>评论数:</label><span th:text="${song.commentCount}" class="song-commentCount"></span>
</h3>
<div class="song-lyrics" th:utext="${song.lyrics}">hello it's me</br>你好么</br>I was wondering if after all there years upi'd like me</div>
<label >相似歌曲</label>
<ul>
    <li class="like-song">
        <!--thymeleaf if else-->
        <a th:if="${song.id  == '2117009'}" href="/songinfo?songId=35847388" class="change-song" data-id="2117009">Hello</a>
        <a th:if="${song.id  == '35847388'}" href="/songinfo?songId=2117009" class="change-song" data-id="2117009">Set Fire to the Rain</a>
    </li>
</ul>


<h1>评论</h1>
<form action="/comment/post" method="post">
    <input type="hidden" name="nickName" value="bmatch">
    <input type="hidden" name="songId" value="35847388"/>
    <input name="content" type="text" style="width: 80%; height: 100px;" placeholder="填写你的评论"/>
    <br/>
    <button type="submit">评论</button>

</form>
<h3>精彩评论</h3>
<ul th:each="comment:${comments}">
    <li>
        <img th:src="${comment.icon}"/>
        <span th:text="${comment.nickName}"></span>
        <span th:text="${comment.content}"></span>
    </li>
    <li>
        <label>
            评论时间
        </label>
        <span th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd HH:mm:ss')}"></span>
        <label>点赞数</label>
        <a href="#" th:data-id="${comment.id}" class="like-btn">
            <span th:text="${comment.likeNum}"></span></a>
    </li>
</ul>

<script>
    $(function(){
        $(".like-btn").on('click',function (e) {
            e.preventDefault();
            var self = $(this);
            // var songId = $(this).data("id");
            var commentId = self.data('id');
            $.ajax({
                url: "/comment/like",
                method: "post",
                data: {
                    songId: "35847388",
                    commentId: commentId
                },
                cache: false
            })
                .done(function (data) {
                    self.html(data.likeNum);
                });
        });
    });
</script>
<script>
    //播放函数
    $(function(){
        $('.play-btn').on('click',function (e) {
            e.preventDefault();
            var songId = $(this).data("id");
            $.ajax({
                url:'/song/music',
                method:'GET',
                data:{
                    songId:songId
                },
                cache:false
            })
                .done(function (data) {
                    $('#player').show();
                    $('#player').attr('src',data);
                    document.getElementById('player').play();
                });
        });

        // function changeSong(e) {
        //     e.preventDefault();
        //     var songId = $(this).data("id");
        //     $.ajax({
        //         url:"/songinfo/get",
        //         method:"GET",
        //         data:{
        //             songId:songId
        //         },
        //         cache:false
        //     }).done(function (data) {
        //         console.log(data);
        //         $('#to-play').attr('data-id',data.id);
        //         $('.song-albumImg').attr('src',data.albumImg);
        //         $('.song-albumName').html(data.albumName);
        //         $('.song-commentCount').html(data.commentCount);
        //         $('.song-lyrics').html(data.lyrics);
        //         $('.song-name').html(data.name);
        //         $('.song-singer').html(data.singer);
        //         if(data.id == '35847388'){
        //             $('.like-song').html('<a href="#" class="change-song" data-id="2117009">Set Fire to the Rain</a>');
        //         }else{
        //             $('.like-song').html('<a href="#" class="change-song" data-id="35847388">Hello</a>');
        //         }
        //        //第二次点击
        //         $('.change-song').on('click', changeSong);
        //     });
        // }
        // //第一次点击
        //  $('.change-song').on('click', changeSong);
    });

</script>
</body>

</html>